<template>
	<view class="LIST">
		<view id="LIST">
			<view class="status_bar"></view>
			<view class="header">
				<view class="btnwarp">
					<view class="btn1" :class="active==1?'active':''" @click="clickBtn(1)">{{$t('yuce.zuqiu')}}</view>
					<view class="btn1" :class="active==2?'active':''" @click="clickBtn(2)">{{$t('yuce.lanqiu')}}</view>
				</view>
				<navigator url="/pages/userAgreement/userAgreement?text=赛事推荐规则&type=4">
					<u-icon name="question-circle" color="#fff" size="20"></u-icon>
				</navigator>
				
			</view>
			<view class="type">
				<view class="t1" :class="type==0?'activeType':''" @click="clickBtnType(0)">{{$t('yuce.renqi')}}</view>
				<view class="t1" :class="type==1?'activeType':''" @click="clickBtnType(1)">{{$t('yuce.zhoubang')}}</view>
				<view class="t1" :class="type==2?'activeType':''" @click="clickBtnType(2)">{{$t('yuce.yuebang')}}</view>
				<view class="t1" :class="type==3?'activeType':''" @click="clickBtnType(3)">{{$t('yuce.lianhong')}}</view>
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback"
			:up="upOption" @up="upCallback" @emptyclick="emptyClick" :top="top+10+'px'">
			<good-list :myFollow="myFollow" :list="goods" @clickRow="clickRow" class="goodlist" :type="type"></good-list>
		</mescroll-uni>
		
		
	</view>
</template>

<script>
	import goodList from "./goodList.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
	import {mapGetters,mapActions} from 'vuex'
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		components: {
			goodList
		},
		computed:{
			...mapGetters(['userInfo', 'api','userToken']),
		},
		data() {
			return {
				active:1,//球类型
				type:0,//类型
				downOption: {
					auto: false ,// 不自动加载 (mixin已处理第一个tab触发downCallback)
					textOutOffset:this.$t('mescroll.shifanggenxin'),
					textInOffset:this.$t('mescroll.xialashuaxin'),
					textLoading:this.$t('mescroll.jiazaizhong'),
					textSuccess:this.$t('mescroll.jiazaichenggong'),
					textErr:this.$t('mescroll.jiazaishibai'),
				},
				upOption: {
					auto: false, // 不自动加载
					noMoreSize: 4, //如果列	表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '~ 暂无记录 ~',
						fixed:true,
						top: "200rpx",
					},
					textNoMore:this.$t('mescroll.chudile')
				},
				goods:[],
				myFollow:[],//我关注的用户ID
				top:'',
			}
		},
		onLoad() {
			this.$nextTick(()=>{
				this.getQueryInfo()
			})
		},
		onShow() {
		},
		methods:{
			...mapActions(['set_userToken']),
			//刷新token
			refreshToken(){
				let params={
				}
				uni.$u.http.post(this.api.api_v1_refreshToken, params).then(res => {
					if(res.code==200&&res.data){
						this.set_userToken(res.data.accessToken)
						this.mescroll.triggerDownScroll()
					}
				}).catch((err)=>{
					this.mescroll.triggerDownScroll()
				})
			},
			clickRow(row){
				console.log(row);
				uni.navigateTo({
					url: `/pages/myPrediction/myPrediction?uid=${row.uid}&matchType=${this.active}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickBtnType(index){
				this.type = index
				this.downCallback()
			},
			clickBtn(index){
				this.active = index
				this.downCallback()
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.goods = []
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.getList(page)
				// this.mescroll.endErr();
			},
			getList(page) {
				// [ 人气榜，周榜，月榜，连红]
				let apiList = [this.api.api_v1_recommend_rankPopularity,this.api.api_v1_recommend_rankList,this.api.api_v1_recommend_rankList,this.api.api_v1_recommend_rankWins]
				let params = {
					matchType:this.active ,//体育类型  1足球  2篮球  默认1
					rankType:this.type,//榜单类型  1周榜  2月榜  默认1
					page:page.num
				}
				uni.$u.http.get(apiList[this.type], {params:params}).then(res => {
					if(page.num==1){
						this.goods = [];
					}
					if(res.code==200&&res.data&&res.data.data){
						console.log(res.data.next_page_url?true:false);
						this.mescroll.endSuccess(res.data.data.length,res.data.next_page_url?true:false);
						this.goods=this.goods.concat(res.data.data)
					}else{
						this.goods=[]
					}
					this.mescroll.endSuccess(res.data.length,false);
					if(this.userInfo&&this.userInfo.id){
						this.getAttentionUids()
					}
					
				}).catch(err => {
					this.goods=[]
					this.mescroll.endErr();
				})
			},
			//获取我关注的用户
			getAttentionUids(){
				let uids = this.goods.map(item=>{
					return item.uid
				})
				let params={
					uids
				}
				uni.$u.http.post(this.api.api_v1_user_getAttentionUids, params).then(res => {
					if(res.code==200&&res.data){
						this.myFollow=res.data
					}
				})
			},
			
			getQueryInfo(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#LIST').boundingClientRect(data => {
					this.top=data.height
					if(this.userInfo&&this.userInfo.id){
						this.refreshToken()
					}else{
						this.mescroll.triggerDownScroll()
					}
					
				}).exec();
			},
			emptyClick(){
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.LIST{
		color: #fff;padding: 10px;
		.header{
			display: flex;justify-content: space-between;align-items: center;
			.btnwarp{
				display: flex;justify-content: space-around;width: 100%;
				.btn1{
					flex: 1; padding: 5px 10px;text-align: center;border-radius: 30px;margin-right: 18px;
				}
				.active{
					background-color: #FF6B00;
				}
			}
			.remark{
				width: 50px;
			}
		}
		.type{
			background-color: #242448; width: 100%;height: 30px;line-height: 30px;font-size: 14px;margin: 10px 0;
			display: flex;justify-content: space-around;border-radius: 4px;
			.activeType{
				color: #FF6B00;
			}
		}
	}
</style>